* { box-sizing: border-box; }
/* Style the body */
    body {
        margin: 0;
        padding: 0;
        overflow-x:hidden;
    }
    .header , .footer {
        flex: 100%;
        padding: 20px;
        text-align: center;
    }
/* Header/logo Title */
    .header {
        background: #094338;
        color: white;
        font-family: "lalezar", Verdana, Tahoma;
        font-size:3vw;    /*   ;26pt  */
    }
/* Footer */
    .footer {
        background: #ddd;
        font-size: 10pt;
    }
/* Main column */
    .main {
        flex: 40%;
        display: flex;
        justify-content: space-around;
        align-content: space-around ;
        align-items: center;
        flex-flow: row wrap;
        background-color: #470000;
        padding: 20px;
        position: relative;
        z-index: 1;
    }

    figure figcaption {
         position: absolute;
        width:100% ;
        background: rgba(0,0,0,0.6);
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 0.7em;
        direction: rtl;
        text-align: center;
        color: #fff;
        opacity: 0;
        bottom: -10%;
        -webkit-transition: all 0.44s ease;
        -moz-transition: all 0.44s ease;
        -o-transition: all 0.44s ease;
        transition: all 0.44s ease;
    }
    figure {
        position: relative;
        background: #fff;
/*        -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35);
        -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35);
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35);*/
        z-index: 0;
    }
    figure:hover figcaption {
        opacity: 1;
        bottom: 5px;
    }

/* Column container */
    .row {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }

/* Sidebar/ columns */
    .side1 , .side2 {
        flex: 25%;
        background-color: #f1f1f1;
        padding: 20px;
        color: black;
    }
    .side1 {
        text-align: center;
    }
    .side2 {
        text-align: right;
    }
    h1,h2,h3,h4,h5,h6 {
        color: #000042;
    }
    .titre a {
        color: black;
        text-align: right;
        font-family:soraya;
        font-size: 14pt;
    }
article {
    font-family: irsans,tahoma;
    font-size:1em;
    text-align:right;
    text-indent: 15px;
    line-height: 2em;
    margin: 2px;
    padding:10px;
    color: black;
    background-color: white;
    width:100%;
}
li a {
    margin: 10px;
    color: #191970;
    text-decoration: none   ;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
/*    @media screen and (max-width: 700px) {.row, .navbar { flex-direction: column; } }      */